<template>
	<!-- 招标项目实施流程配置 -->
	<div class="processSetup">
		<div class="tabBox">
			<div class="tabClass">
				<div class="className">公开：</div>
				<div class="makeTab">
					<template v-for="(item, index) in state.mainFlows" :key="index">
						<div
							@click="getFlowDetail(item.flowPublicId,item.flowName)"
							v-if="item.status == '1'"
							:class="
								state.flowPublicId === item.flowPublicId ? 'tabItemHover' : ''
							"
							class="tabItem"
						>
							{{ item.flowName }}
						</div>
					</template>
				</div>
			</div>
			<div class="tabClass">
				<div class="className">非公开：</div>
				<div class="makeTab">
					<template v-for="(item, index) in state.mainFlows" :key="index">
						<div
							@click="getFlowDetail(item.flowPublicId,item.flowName)"
							v-if="item.status != '1'"
							:class="
								state.flowPublicId === item.flowPublicId ? 'tabItemHover' : ''
							"
							class="tabItem"
						>
							{{ item.flowName }}
						</div>
					</template>
				</div>
			</div>
		</div>

		<!-- 分割线 -->
		<el-divider />

		<div class="content">
			<div class="c_tab_name">{{ state.flowName }}</div>

			<div class="c_tab_lc_item" v-for="(v, i) in state.fLowDetail" :key="i">
				<!-- 图标 -->
				<div class="c_tab_lc_item_icon">
					<svg-icon
						@click="handleJiaj(i)"
						icon-class="project-detail-icon-jia"
						class="icon"
					/>
					<svg-icon
						@click="handleJianj(i)"
						icon-class="project-detail-icon-jian"
						class="icon"
					/>
				</div>
				<div class="c_tab_lc_item_col1">
					<span>{{ v.nodeName }}</span>
					<span class="jiantou" v-show="state.fLowDetail.length != i + 1">
						<svg-icon icon-class="project-detail-icon-up" class="icon" />
					</span>
				</div>
				<div class="c_tab_lc_item_col2">
					<span>流程执行结果</span>
					<span class="jiantou">
						<svg-icon icon-class="project-detail-icon-left" class="icon" />
					</span>
				</div>
				<div class="c_tab_lc_item_col1 c_tab_lc_item_col3">
					<span>{{ v.actionResult }}</span>
					<span></span>
				</div>
				<div class="c_tab_lc_item_colbtn">
					<el-button color="#D4AE85" @click="editDialog(i)">设置</el-button>
				</div>
			</div>
		</div>

		<!-- 空 -->
		<div class="empty" v-if="false">
			<svg-icon icon-class="project-detail-icon-empty" class="icon" />
		</div>

		<div class="submitBtn">
			<el-button color="#D4AE85" @click="handelConfirmTaskFlow"
				>保存配置</el-button
			>
		</div>

		<!--设置所选流程执行结果弹窗 -->
		<EditProcessResult
			@updataNodeActions="updataNodeActions"
			:allNodeActions="
				state.allNodes[0]?.actionId ? state.allNodes : state.allNodeActions
			"
			ref="editProcessResultRef"
		></EditProcessResult>
		<!-- 新增的流程弹窗 -->
		<AddProcessDialog
			@updataAddProcess="updataAddProcess"
			type="node"
			:showArrayList="state.fLowDetail"
			:allNodes="state.allNodes"
			ref="addProcessRef"
		></AddProcessDialog>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElDivider, ElButton, ElMessage, ElMessageBox } from "element-plus";
import EditProcessResult from "./components/EditProcessResult";
import AddProcessDialog from "./components/AddProcessDialog";
import { processApi } from "@/api/biddingProject";

const state = reactive({
	mainFlows: [],
	flowPublicId: "",
	flowName: "",
	// 公共流程信息
	fLowDetail: [],
	// 所有节点行为信息
	allNodeActions: [],
	// 选中的index
	index: "",
	// 公共节点
	allNodes: [],
});

// 获取公共流程信息
const getMainFlows = () => {
	processApi.getMainFlows().then((res) => {
		if (res.code === "200") {
			state.mainFlows = res.data;
			state.flowPublicId = res.data[0].flowPublicId;
			state.flowName = res.data[0].flowName;
      getFlowDetail(state.flowPublicId);
      
		}
	});
};

// 获取公共节点信息
const getAllNodes = () => {
	processApi.getAllNodes().then((res) => {
		if (res.code === "200") {
			state.allNodes = res.data;
			if (state.allNodes.length > 0 && state.allNodeActions.length > 0) {
				funArrayHandle();
			} else {
				setTimeout(() => {
					funArrayHandle();
				}, 1000);
			}
		}
	});
};

// 获取公共流程配置信息
const getFlowDetail = (flowPublicId, name) => {
  if (name) {
    state.flowName = name
  }
	state.flowPublicId = flowPublicId;
	processApi.getFlowDetail(flowPublicId).then((res) => {
		if (res.code === "200") {
			state.fLowDetail = res.data;
		}
	});
};
// 获取所有节点行为信息
const getAllNodeActions = () => {
	processApi.getAllNodeActions().then((res) => {
		if (res.code === "200") {
			state.allNodeActions = res.data;
		}
	});
};

const funArrayHandle = () => {
	if (state.allNodes.length == 0 && state.allNodeActions.length == 0) {
		return;
	}
	state.allNodes = state.allNodes.map((v, i) => {
		return {
			...v,
			...state.allNodeActions[i],
		};
	});

	console.log("state.allNodes ", state.allNodes);
};

// 设置流程执行结果
const updataNodeActions = (row) => {
	state.fLowDetail = state.fLowDetail.map((v, i) => {
		if (state.index == i) {
			v.actionResult = row.actionResult;
			v.actionId = row.actionId;
			state.index = "";
		}
		return v;
	});
	console.log(state.fLowDetail);
};

const addProcessRef = ref(null);
let index_ = null;
// 加 打开弹出层
const handleJiaj = (index) => {
	addProcessRef.value.open();
	index_ = index;
};
// 设置 新增的流程
const updataAddProcess = (row) => {
	// const obj = {
	// 	nodeName: row.nodeName,
	// 	nodeId: row.nodeId,
	// };
	state.fLowDetail.splice(index_ + 1, 0, row);
	index_ = null;
};

// 减
const handleJianj = (index) => {
	if (state.fLowDetail.length == 1) {
		return ElMessage.warning("至少保留一个节点");
	}
	state.fLowDetail.splice(index, 1);
};

// 更新流程配置
const handelConfirmTaskFlow = () => {
	const flowConfig = state.fLowDetail.map((v, i) => {
		let parentNodeId = null;
		if (i !== 0) {
			parentNodeId = state.fLowDetail[i - 1].nodeId;
		}
		const obj = {
			flowPublicId: state.flowPublicId,
			nodeId: v.nodeId,
			actionId: v.actionId,
			parentNodeId,
		};
		return obj;
	});

	ElMessageBox.confirm("是否确认保存当前流程配置结果?", "提示", {
		confirmButtonText: "确认保存",
		cancelButtonText: "取消",
		type: "warning",
		confirmButtonClass: "ExitConfirmButton",
		cancelButtonClass: "ExitCancelButton",
		center: true,
	}).then(() => {
		processApi
			.updateFlowConfig({ flowPublicId: state.flowPublicId, flowConfig })
			.then((res) => {
				if (res.code === "200") {
					ElMessage.success("保存配置成功!");
				}
			});
	});
};

const editProcessResultRef = ref(null);
const editDialog = (index) => {
	state.index = index;
	editProcessResultRef.value.open();
};

onMounted(() => {
	getMainFlows();
	getAllNodeActions();
	getAllNodes();
});
</script>
<style lang="scss" scoped>
.processSetup {
	.tabClass {
		display: flex;
		margin-bottom: 32.0064px;
		.className {
			width: 70.0032px;
			text-align: right;
			margin-right: 10.0032px;
			line-height: 42.0096px;
			font-size: 15.9936px;

			font-weight: 700;
			color: #1a1a1a;
		}
	}
	.tabBox {
		.makeTab {
			width: 1400.0064px;
			display: flex;
			flex-wrap: wrap;
			.tabItem {
				width: 219.9936px;
				height: 42.0096px;
				background: #ffffff;
				border-radius: 6.0096px;
				border: 0.9984px solid #1a1a1a;
				font-size: 13.9968px;

				font-weight: 400;
				color: #1a1a1a;
				line-height: 42.0096px;
				text-align: center;
				cursor: pointer;
				margin: 0 50px 30px 0;
			}

			.tabItemHover {
				background: #fc7018;
				color: #fff;
				border: 0.9984px solid #fc7018;
			}
		}
	}

	.content {
		.c_tab_name {
			width: 219.9936px;
			height: 42.0096px;
			line-height: 42.0096px;
			background: #fc7018;
			border-radius: 6.0096px;
			font-size: 13.9968px;

			font-weight: 700;
			color: #ffffff;
			text-align: center;
			margin: 0 0 37.9968px 0;
		}

		.c_tab_lc_item {
			display: flex;
			margin-bottom: 51.9936px;

			.c_tab_lc_item_icon {
				margin: 5px 10px 0 0;
				.icon {
					width: 0.1146rem;
					height: 0.1146rem;
					cursor: pointer;
				}
				.icon:nth-child(1) {
					margin-right: 0.026rem;
				}
			}
			.c_tab_lc_item_col1 {
				position: relative;
				width: 300px;
				height: 30.0096px;
				line-height: 30.0096px;
				background: #f7f7fa;
				border-radius: 6.0096px;
				font-size: 13.9968px;

				font-weight: 400;
				color: #1a1a1a;
				text-align: center;
				.jiantou {
					position: absolute;
					display: inline-block;
					width: 18px;
					height: 18px;
					left: 45%;
					top: 40px;
				}
			}
			.c_tab_lc_item_col2 {
				position: relative;
				width: 150px;
				font-size: 12px;

				font-weight: 400;
				color: #1a1a1a;
				line-height: 18.0096px;
				text-align: center;
				.jiantou {
					position: absolute;
					display: inline-block;
					width: 18px;
					height: 18px;
					left: 45%;
					top: 13px;
				}
			}
			.c_tab_lc_item_colbtn {
				.el-button {
					color: #fff;
					height: 30.0096px;
					margin-left: 13.9968px;
				}
			}
		}
	}

	.empty {
		margin: 100px auto;
		width: 144px;
		height: 144px;
		transform: translateX(-50%);
		.icon {
			width: 100%;
			height: 100%;
		}
	}
	.submitBtn {
		position: absolute;
		bottom: 99.9936px;
		right: 99.9936px;
		.el-button {
			width: 120px;
			height: 36px;
			color: #fff;
			border-radius: 36px;
			box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.12);
		}
	}
	.jiantou {
		width: 18px;
		height: 18px;
		.icon {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
<style>
.ExitConfirmButton {
	background: #ff6f29 !important;
	color: #fff !important;
	border: 0;
}
.ExitCancelButton {
	background-color: #fff !important;
}
</style>
